<template>
  <van-tabbar
    v-model="active"
    active-color="#fc6627"
    inactive-color="#000"
    route
  >
    <!-- 首页部分 -->
    <van-tabbar-item to="/home" name="home" icon="home-o">
      <span>首页</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="home-sel"></GeekIcon>
        <GeekIcon v-else name="home"></GeekIcon>
        <!-- <van-icon></van-icon> -->
        <!-- <van-icon></van-icon> -->
      </template>
    </van-tabbar-item>
    <!-- 问答部分 -->
    <van-tabbar-item to="/question" name="question" icon="search">
      <span>问答</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="qa-sel"></GeekIcon>
        <GeekIcon v-else name="qa"></GeekIcon>
        <!-- <van-icon></van-icon> -->
        <!-- <van-icon></van-icon> -->
      </template>
    </van-tabbar-item>
    <!-- 视频部分 -->
    <van-tabbar-item to="/video" name="video" icon="friends-o">
      <span>视频</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="video-sel"></GeekIcon>
        <GeekIcon v-else name="video"></GeekIcon>
        <!-- <van-icon></van-icon> -->
        <!-- <van-icon></van-icon> -->
      </template>
    </van-tabbar-item>
    <!-- 我的部分 -->
    <van-tabbar-item to="/user" name="user" icon="user-o">
      <span>我的</span>
      <template v-slot:icon="{ active }">
        <GeekIcon v-if="active" name="mine-sel"></GeekIcon>
        <GeekIcon v-else name="mine"></GeekIcon>
        <!-- <van-icon></van-icon> -->
        <!-- <van-icon></van-icon> -->
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
// import GeekIcon from '@/components/geek-icon.vue'
export default {
  name: 'Tabbar',
  // components: {
  //   GeekIcon
  // },
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style scoped lang="less">
.van-tabbar {
  background: #f7f8fa;
  position: static;
}
::v-deep .van-tabbar-item--active {
  color: #fc6627;
  background-color: #f7f8fa;
}
::v-deep .van-tabbar-item__icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
}
</style>
